$(function () {
  /* 1.查询个人信息
      1.1 页面一加载发送ajax请求
      1.2 响应数据之后渲染到页面
  */
  // console.log(BigNew)
  // 面向接口编程：获取用户信息
  $.ajax({
    method: 'get',
    // 直接从封装的 http.js 中获取请求地址即可
    url: BigNew.user_info,
    // 请求成功
    success: (res) => {
      // console.log(res)
      // ✅ 合理使用 ES6 的解构语法，直接把对象的 nickname，userPic 解构出来
      const { nickname, userPic } = res.data
      // 这是原始的写法
      // const nickname = res.data.nickname
      // const userPic = res.data.userPic
      // console.log(nickname, userPic)
      $('.user_info span').text('欢迎大佬：' + nickname)
      // JQ 可以支持并级选择器，同时选中两个图片元素修改 src 属性
      $('.user_info img , .user_center_link img').prop({ src: userPic })
    },
  })
  /* 2.退出登录
      2.1 删除token
      2.2 跳转登录页
  */
  $('.logout').click(() => {
    // 2.1 删除 token，因为 token 携带了用户的标识，退出登录要删除用户标识
    localStorage.removeItem('token')
    // 🧨 注意：location.href 是相对于浏览器地址栏的值
    location.href = './login.html'
  })

  /* 
    3. 左侧导航栏点击`a标签高亮效果`与`文章管理下拉效果
  */
  $('.level01').click(function () {
    // 3.1 点击标签高亮效果
    $(this).addClass('active').siblings().removeClass('active')
    // 3.2 如果点击的 level01 后面跟着的是 level02 就切换显示 level02
    if ($(this).next().hasClass('level02')) {
      // 切换显示隐藏 level02
      $(this).next().stop().slideToggle()
      // 切换当前 level01 右侧的小箭头角度
      $(this).find('.icon-arrowdownl').toggleClass('rotate0')
    }
    // 3.2 如果点击的 level01 后面没有 level02
    else {
      // 收起来文章管理
      $('.level02').slideUp()
      // 收起来文章管理的同时，需要把孩子的 active 也去掉，变回默认状态
      $('.level02 li').removeClass('active')
      // 图标角度变回默认
      $('.level01').find('.icon-arrowdownl').removeClass('rotate0')
    }
  })

  // 3.3 点击二级菜单的 li 切换显示高亮效果
  // 🧨注意：二级菜单事件绑定是 <同级> 书写，如果嵌套书写就会出现重复的事件绑定
  $('.level02 li').click(function () {
    // 排他高亮效果而已
    $(this).addClass('active').siblings().removeClass('active')
  })
})
